<template>
  <div class="about">
     <HelloWorld title="我的书架" leftText="返回" rightText=""/>

     <div class="doing">
        <h2>正在看</h2>
         <ul>
            <li v-for="item,index in $store.state.bookList" :key="item.id" v-show="!item.status">
                <span>{{item.name}}</span>
                <span @click="change(item.id)">标记已读</span>
                <span @click="del(item.id)">删除</span>
            </li>
         </ul>
     </div>
      <div class="done">
        <h2>已完成</h2>
        <ul>
            <li v-for="item,index in $store.state.bookList" :key="item.id" v-show="item.status">
                 <span>{{item.name}}</span>
                 <span @click="change(item.id)">标记未读</span>
                  <span  @click="del(item.id)">删除</span>
            </li>
         </ul>
     </div>
  </div>
</template>
<script>
import HelloWorld from '@/components/HelloWorld.vue'
export default {
    data() {
        return {
            
        }
    },
    components:{
        HelloWorld
    },
    methods: {
        change(id){
             this.$store.commit('change',id)
        },
        del(id){
            this.$store.commit('del',id)
        }
    },
}
</script>
